<div class="files_slider">
	<div class="wrapper">
		<div class="list" style="width:calc(100%*{{ADD(folders.length):files.length}})"> 
			{{foreach f in folders}}
				<img class="item" class="folder" data-id="{{f.id}}" data-name="{{f.name}}" src="/shared/icons/filebrowser/_folder-big.png"/>
				<!--</div>-->
			{{/foreach}}
			{{foreach f in files}}
				<img class="item" class="file" data-id="{{f.id}}" data-name="{{f.name}}" src="{{f.icon}}"/>
				<!--</div>-->
			{{/foreach}}
		</div>
		<div class="name"></div>
	</div>
</div>
<script>
	function resize_preview(){
		var folder_l = {{JSON:folders.length}};
		var files_l = {{JSON:files.length}};
		var lw = $('.files_slider .wrapper').width();
		$('.files_slider .list').width();
		
		
		$('.files_slider .item').css({
			'max-width':lw*.9,
			'margin':'0px '+lw*.1+'px',
		});
	}
	window.onresize = resize_preview;
	resize_preview();
	
</script>